<template>
	<view class="container">
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000"
			style="height: 388rpx; margin-bottom: 1rem">
			<swiper-item v-for="image in swiperImages" :key="image.id">
				<view class="swiper-item">
					<image :src="httpResources(image.tupian)" mode="aspectFill" class="banner-img" />
				</view>
			</swiper-item>
		</swiper>
		<view class="job-title-container">
			<view class="job-title">最新招聘信息</view>
		</view>
		<view class="list" v-for="news in newsList" :key="news.id" @click="godetail(news)">
			<view class="item" @tap="$toPage('/pages/article/detail')">
				<view class="title text-ellipsis">{{ news.biaoti }}</view>
				<view class="content flex-row">
					<view class="info">
						<view class="summary" v-html="news.neirong"></view>
						<view class="flex-row" style="width: 100%; display: flex; justify-content: space-between">
							<text class="date">{{ news.createTime }}</text>
							<text class="views">{{ news.dianjilv }}% 点赞率</text>
						</view>
					</view>
					<!-- <view class="cover">
						<image class="img" :src="`http://localhost:8888/files/download/${news.shouyetupianavt}`">
						</image>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getXinwenList,
		bianhuantu
	} from '@/request/API/xinwentongzhi/index'
	import {
		httpResources
	} from "@/tool/index.js"

	export default {
		/**
		 * 2020年12月9日  李新雷编写（练习）  适用所有app登录
		 * vue版本简洁又美观的登录页面（个人感觉插件市场的登录都不太好看，哈哈 O(∩_∩)O）
		 * 如果需要注册（注册可以设计在登录按钮下方），直接复制该页面稍微改动即可
		 */
		data() {
			return {
				newsList: [],
				swiperImages: [],
			}
		},
		onLoad() {},
		onShow() {
			this.getxinxi()
			this.bianhuantu()
		},
		methods: {
			httpResources(path){
				return httpResources(path)
			},
			bianhuantu() {
				bianhuantu().then((res) => {
					this.swiperImages = res.list
				})
			},
			getxinxi() {
				getXinwenList({
					pageSize: 100,
					page: 1,
				}).then((res) => {
					res.list.forEach((item) => {
						console.log(item);
						if (item.shouyetupian) {
							item.shouyetupianavt = JSON.parse(item.shouyetupian)[0]
						}
					})
					this.newsList = res.list
				})
			},
			godetail(news) {
				uni.navigateTo({
					url: `/pages/xinwen/xinwendetail?data=${encodeURIComponent(
          JSON.stringify(news)
        )}`,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.job-title-container {
		display: flex;
		// justify-content: center;
		align-items: center;
		height: 80rpx;
		width: 95%;
		/* 设置高度 */
		margin: 20rpx auto;
		/* 上下间距 */
	}

	.job-title {
		padding: 10rpx 20rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #ff7e5f, #feb47b);
		/* 使用渐变色 */
		border-radius: 40rpx;
		/* 圆角处理 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
	}

	.swiper-item,
	.banner-img {
		width: 100%;
		height: 100%;
	}

	.item {
		padding: 30rpx;
		margin-bottom: 30rpx;
		background-color: #fff;

		.title {
			font-weight: bold;
			// padding-bottom: 30rpx;
			// border-bottom: 2rpx solid #F5F5F5;
		}

		.content {
			padding-top: 30rpx;
			align-items: flex-start;
			display: flex;
			justify-content: space-between;

			.info {
				// width: calc(100% - 160rpx);

				.summary {
					color: #777;
					height: 80rpx;
					font-size: 24rpx;
					line-height: 1.6;
					margin-bottom: 10rpx;
					@include text-ellipsis(2);
				}

				.date {
					font-size: 24rpx;
					color: $main-color;
					opacity: 0.6;
				}

				.views {
					color: #999;
					font-size: 24rpx;
				}
			}

			.cover {
				width: 140rpx;
				height: 120rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
				}
			}
		}
	}
</style>